<template>
  <z-modal
    :title="title"
    :width="600"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
  <a-spin :spinning="confirmLoading">
    <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
      <a-row>
        <a-col :span="24" >
          <a-form-model-item label="上级菜单" prop="parentId">
            <a-tree-select
              v-model="form.parentId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="menuOptions"
              placeholder="请选择"
              :replaceFields="{children:'children', title:'title', key:'id', value: 'id' }"
              tree-default-expand-all
              allowClear
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" >
          <a-form-model-item label="菜单类型" prop="urlType">
            <a-radio-group @change="handleChangeType" v-model="form.urlType" button-style="solid">
              <a-radio-button value="M">目录</a-radio-button>
              <a-radio-button value="C">菜单</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" >
          <a-form-model-item label="菜单标题" prop="title">
            <a-input v-model="form.title" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24" >
          <a-form-model-item prop="path" >
            <span slot="label">
              <a-tooltip>
                <template slot="title">
                  访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头
                </template>
                <a-icon type="question-circle-o" />
              </a-tooltip>
              路由地址
            </span>
            <a-input v-model="form.path" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24" >
          <a-form-model-item prop="component">
            <span slot="label">
              <a-tooltip>
                <template slot="title">
                  访问的组件路径，如：`system/user/index`，默认在`pages`目录下
                </template>
                <a-icon type="question-circle-o" />
              </a-tooltip>
              组件路径
            </span>
            <a-input v-model="form.component" :disabled="form.urlType === 'M'" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12" >
          <a-form-model-item :label-col="labelCol2" :wrapper-col="wrapperCol2" label="图标" prop="icon" >
            <a-input placeholder="点击选择图标" v-model="form.icon">
              <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
            </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" >
          <a-form-model-item label="排序" :label-col="labelCol2" :wrapper-col="wrapperCol2" prop="order">
            <a-input-number v-model="form.order" :min="0" :max="9999" style="width: 100%" />
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="12" >
          <a-form-model-item :label-col="labelCol2" :wrapper-col="wrapperCol2" prop="perms">
            <span slot="label">
              权限标识
              <a-tooltip>
                <template slot="title">
                  控制器中定义的权限字符，如：system:user:list
                </template>
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>
            <a-input v-model="form.perms" placeholder="请输入" :maxLength="100" />
          </a-form-model-item>
        </a-col> -->
        <a-col :span="12" >
          <a-form-model-item :label-col="labelCol2" :wrapper-col="wrapperCol2" prop="visible" >
            <span slot="label">
              <a-tooltip>
                <template slot="title">
                  选择隐藏则路由将不会出现在侧边栏，但仍然可以访问
                </template>
                <a-icon type="question-circle-o" />
              </a-tooltip>
              是否显示
            </span>
            <a-radio-group v-model="form.navigable">
              <a-radio :value="true">显示</a-radio>
              <a-radio :value="false">隐藏</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="form.urlType == 'C'">
          <a-form-model-item :label-col="labelCol2" :wrapper-col="wrapperCol2" prop="outside">
            <span slot="label">
              <a-tooltip>
                <template slot="title">
                  选择是外链则路由地址需要以`http(s)://`开头
                </template>
                <a-icon type="question-circle-o" />
              </a-tooltip>
              是否外链
            </span>
            <a-radio-group v-model="form.outside" >
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="form.urlType == 'C'">
          <a-form-model-item :label-col="labelCol2" :wrapper-col="wrapperCol2" prop="keepAlive" >
              <span slot="label">
                <a-tooltip>
                  <template slot="title">
                    选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致，仅在多页签下有效。
                  </template>
                  <a-icon type="question-circle-o" />
                </a-tooltip>
                是否缓存
              </span>
              <a-radio-group v-model="form.keepAlive">
                <a-radio :value="true">是</a-radio>
                <a-radio :value="false">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
        </a-col>
      </a-row>
      </a-form-model>
  </a-spin>
    <!-- 选择图标 -->
    <icons ref="icons" @choose="handleIconChoose"></icons>
  </z-modal>
</template>

<script>

// import { addMenu, editMenu } from '@/services/system'
import Icons from './icon/Icons'
import { TreeSelect as ATreeSelect } from 'ant-design-vue'
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { CURY_TYPE } from '@/store/mutation-types'
export default {
  name: 'MenuModal',
  components: {
    Icons,
    ATreeSelect
  },
  props: {
    menuOptions: {
      type: Array,
      required: true
    }
  },
  mixins: [ModalFormMixin],
  data() {
    return {
      title: '',
      form: { // 表单参数
        icon: ''
      },
      validatorRules: {
        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
        component: [{ required: true, message: '组件路径不能为空', trigger: 'blur' }],
        urlType: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }]
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      url: {
        add: '/res/url/add',
        edit: '/res/url/edit'
      }
    }
  },
  methods: {
    addAfter(row) {
      const defaultData = {
        order: 1,
        navigable: true,
        outside: false,
        urlType: 'M',
        keepAlive: false,
        component: 'blank'
      }
      if (row != null && row.id) {
        defaultData.parentId = row.id
        defaultData.urlType = 'C'
      } else {
        defaultData.parentId = ''
      }
      this.form = Object.assign({}, defaultData)
    },
    classifyIntoFormData() {
      this.form.crudType = this.editType === 'add' ? CURY_TYPE.SAVE : CURY_TYPE.UPDATE
      if (this.form.urlType === 'M' && !this.form.component) {
        this.form.component = 'blank'
      }
      return {
        ...this.form
      }
    },
    handleChangeType() {
      if (this.form.urlType === 'M' && !this.form.component) {
        // this.$set(this.form, 'component', 'blank')
      }
    },
    selectIcons() {
      this.$refs.icons.iconChooseVisible = true
    },
    handleIconChoose(icon) {
      this.$set(this.form, 'icon', icon)
    }
  }
}
</script>
<style scoped>
</style>
